<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Carousel - 旋转木马</title>
<link rel="shortcut icon" href="../../../../kissy-dpl/base/assets/favicon.ico"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/reset.css"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/kissy-docs.css"/>

<link rel="stylesheet" href="../../../../kissy-dpl/base/build/css/loading.css"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/build/css/form.css"/>

<script src="../../../build/kissy.js"></script>
<script src="../../../../kissy-dpl/base/assets/kissy-docs.js"></script>
</head>
<body>
<div id="header">
    <h1 class="logo"><a alt="KISSY" href="http://kissyui.com/"><img src="../../../../kissy-dpl/base/assets/logo.png"/></a></h1>
    <div class="sub-title">Switchable</div>
    <ul class="navigation">
        <li><a href="http://blog.kissyui.com/">博客</a></li>
        <li><a href="http://github.com/kissyteam">源码</a></li>
    </ul>
</div>
<div id="content" class="form">
<div class="s-crumbs">
    <span>当前位置：</span>
    <a href="http://kissyui.com/">KISSY</a>
    <a href="http://docs.kissyui.com/docs/html/api/component/switchable/carousel.html">Carousel</a>
    <span>Demo</span>
</div>

    <pre class="s-section">
功能：旋转木马
源码：<a href="../carousel/base.js">../carousel/base.js</a></pre>

<h3 class="s-title">Carousel - 旋转木马</h3>
<div class="s-section">
    <style>
        .scrollable {
            position: relative;
            width: 820px;
        }

        .scrollable .prev, .scrollable .next {
            position: absolute;
            top: 50px;
            color: #666;
            cursor: pointer;
        }

        .scrollable .prev {
            left: 10px;
        }

        .scrollable .next {
            right: 10px;
        }

        .scrollable .disable {
            color: #ddd;
            cursor: default;
        }

        .scrollable .ks-switchable-nav {
            position: absolute;
            right: 30px;
            top: -10px;
        }

        .scrollable .ks-switchable-nav li {
            float: left;
            padding: 5px;
            font-size: 18px;
            cursor: pointer;
        }

        .scrollable .ks-switchable-nav li.ks-active {
            color: #C8282B;
        }

        .scroller {
            position: relative;
            width: 680px;
            height: 120px;
            border: 1px solid #ccc;
            background-color: #F9F9F9;
            margin: auto;
            overflow: hidden;
        }

        .scroller .ks-switchable-content img {
            float: left;
            width: 100px;
            height: 75px;
            padding: 2px;
            margin: 20px 15px;
            background-color: #fff;
            border: 1px solid #ccc;
            display: inline !important; /* fix ie6 双边距 bug */
        }
    </style>

    <div id="demo4" class="s-demo scrollable">
        <span id="scroller-prev" class="prev disable">&lsaquo; 上一页</span>
        <span id="scroller-next" class="next">下一页 &rsaquo;</span>
        <div class="scroller">
            <div class="ks-switchable-content">
                <!-- 1-5 -->
                <img alt="" src="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
                <img alt="" src="http://img02.taobaocdn.com/tps/i2/T1.XGaXalnXXXXXXXX-110-135.png"/>
                <img alt="" src="http://img04.taobaocdn.com/tps/i4/T1oEmXXmVoXXXXXXXX-110-135.png"/>
                <img alt="" src="http://img04.taobaocdn.com/tps/i4/T1oEmXXmVoXXXXXXXX-110-135.png"/>
                <img alt="" src="http://img03.taobaocdn.com/tps/i3/T1Hm1XXipvXXXXXXXX-110-135.png"/>
                <!-- 5-10 -->
                <img id='carousel_lazy1' alt=""
                     data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
                <img alt="" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
                <img alt="" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
                <img alt="" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
                <img alt="" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
                <!-- 10-15 -->
                <img alt="" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
                <img alt="" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
                <img alt="" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
                <img alt="" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>
                <!--测试不为倍数的情况<img alt="" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/>-->
            </div>
            <ul class="ks-switchable-nav">
                <li class="ks-active">&bull;</li>
                <li>&bull;</li>
                <li>&bull;</li>
            </ul>
            <script>
                KISSY.use("event,switchable,datalazyload", function(S, Event) {
                    var Carousel = S.Carousel;

                    S.ready(function(S) {
                        var carousel = new Carousel('#demo4', {
                            effect: 'scrollx',
                            easing: 'easeOutStrong',
                            steps: 5,
                            viewSize: [680],
                            circular: false,
                            prevBtnCls: 'prev',
                            nextBtnCls: 'next',
                            //autoplay:true,
                            disableBtnCls: 'disable',
                            lazyDataType: 'img-src'
                        });

                        carousel.on('itemSelected', function(ev) {
                            alert('I am selected. src = ' + ev.item.src);
                        });

                        window.carousel = carousel;
                    });
                });
            </script>
        </div>
    </div>
    <a class="s-view-code" href="#">显示源码</a>
</div>

<h3 class="s-title">Carousel - 旋转木马(首页)</h3>
<div class="s-section">
<style>
    .tiny-slide-wrap {
        overflow: hidden;
        width: 274px;
        height: 143px;
    }

    .tiny-slide-wrap .ks-switchable-nav {
        display: none;
    }

    .tiny-slide-wrap .tiny-hd {
        height: 26px; /*width:298px;*/
        background: url('http://a.tbcdn.cn/p/fp/2011a/assets/sprites.gif') -143px -203px no-repeat;
        position: relative;
    }

    .tiny-slide-wrap .tiny-hd .sk-title {
        display: block;
        width: 65px;
        height: 27px;
        top: 0;
        left: 0;
        position: absolute;
    }

    .tiny-slide-wrap .tiny-hd .sk-title img {
        width: 100%;
        height: 100%;
    }

    .tiny-slide-wrap .tiny-hd h3 {
        color: #999999;
        font-size: 12px;
        padding-left: 70px;
        padding-top: 8px;
        font-weight: normal;
    }

    .tiny-slide-wrap .tiny-hd .txt-indicator {
        position: absolute;
    }

    .tiny-slide-wrap .tiny-hd .tiny-prev {
        background: url('http://a.tbcdn.cn/p/fp/2011a/assets/sprites.gif') -165px -110px no-repeat;
        display: block;
        height: 14px;
        overflow: hidden;
        position: absolute;
        right: 14px;
        top: 10px;
        width: 16px;
    }

    .tiny-slide-wrap .tiny-hd .tiny-prev:hover {
        background-position: -165px -124px;
    }

    .tiny-slide-wrap .tiny-hd .tiny-next {
        background: url('http://a.tbcdn.cn/p/fp/2011a/assets/sprites.gif') -180px -110px no-repeat;
        display: block;
        height: 14px;
        overflow: hidden;
        position: absolute;
        right: 0px;
        top: 10px;
        width: 16px;
    }

    .tiny-slide-wrap .tiny-hd .tiny-next:hover {
        background-position: -180px -124px;
    }

    .tiny-slide-wrap .tiny-hd .txt-indicator {
        font-weight: bold;
        position: absolute;
        font-size: 11px;
        color: #666666;
        top: 9px;
        right: 40px;
    }

    .tiny-slide-wrap .tiny-hd .txt-indicator em {
        color: #ff6600;
    }

    .tiny-slide-wrap .tiny-slide-content {
        width: 100%;
        height: 117px;
        overflow: hidden;
    }

    .tiny-slide-wrap .tiny-slide-content .tiny-item {
        position: relative;
        width: 274px;
        float: left;
        padding-top: 10px;
    }

    .tiny-slide-wrap .tiny-slide-content .tiny-pic {
        display: block;
        width: 122px;
        height: 100px;
        position: absolute;
        top: 10px;
        left: 5px;
    }

    .tiny-slide-wrap .tiny-slide-content p {
        padding-left: 147px;
        height: 12px;
        margin-bottom: 9px;
        _margin-bottom: 3px;
    }

    .tiny-slide-wrap .tiny-slide-content .full {
        padding-top: 4px;
    }

    .tiny-slide-wrap .tiny-slide-content .des {
        color: #3e3e3e;
        padding-top: 15px;
    }

    .tiny-slide-wrap .tiny-slide-content .price {
        color: #999999;
    }

    .tiny-slide-wrap .tiny-slide-content .link {
        color: #ff6600;
        font-weight: bold;
    }

    .tiny-slide-wrap .tiny-slide-content .btn {
        display: block;
        width: 78px;
        height: 22px;
        background: url('http://a.tbcdn.cn/p/fp/2011a/assets/sprites.gif') -197px -110px no-repeat;
    }

    .tiny-slide-wrap .tiny-slide-content .btn:hover {
        background-position: -275px -110px;
    }

</style>
<div id="J_TinySlide" class="s-demo tiny-slide-wrap">
    <div class="tiny-hd pr">
        <a class="sk-title" href="http://try.taobao.com/index.htm?id=try2">
            <img src="http://a.tbcdn.cn/p/fp/2011a/assets/space.gif"/>
        </a>
        <h3>(18240件免费商品)</h3>

        <a title="上一页" href="javascript:void(0);" hidefocus="true" class="tiny-prev" id="J_TinyPrev"></a>

        <a title="下一页" href="javascript:void(0);" hidefocus="true" class="tiny-next" id="J_TinyNext"></a>
    </div>
    <div class="tiny-slide-content clearfix" data-active-index="1" style="position: relative;">
        <ol class="ks-switchable-content" style="position: absolute; width: 288px;left:0px; ">

            <li class="tiny-item" style="display: block; float: left;">
                <a href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.1&SPM=1.55010.103950.1.0.0.0&item_id=593722" class="tiny-pic"><img alt="欧美经典鳄鱼纹包" width="122" height="100" src="http://img03.taobaocdn.com/tps/i3/T14eycXeXXXXXXXXXX-122-100.jpg"></a>
                <p class="des">欧美经典鳄鱼纹包</p>
                <p class="price">原价:374</p>

                <p class="full"><a class="btn" href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.2&SPM=1.55010.103950.2.0.0.0&item_id=593722"></a></p>
            </li>
            <li class="tiny-item" style="display: block; float: left;">
                <a href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.3&SPM=1.55010.103950.3.0.0.0&item_id=608713" class="tiny-pic"><img alt="新款无叶风扇" width="122" height="100" src="http://img02.taobaocdn.com/tps/i2/T1SeycXepXXXXXXXXX-122-100.jpg"></a>
                <p class="des">新款无叶风扇</p>
                <p class="price">原价:498</p>
                <p class="full"><a class="btn" href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.4&SPM=1.55010.103950.4.0.0.0&item_id=608713"></a></p>
            </li>

            <li class="tiny-item" style="display: block; float: left;">
                <a href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.5&SPM=1.55010.103950.5.0.0.0&item_id=570730" class="tiny-pic"><img alt="波西米亚抹胸长裙" width="122" height="100" src="http://img04.taobaocdn.com/tps/i4/T17KycXd4XXXXXXXXX-122-100.jpg"></a>
                <p class="des">波西米亚抹胸长裙</p>
                <p class="price">原价:97</p>
                <p class="full"><a class="btn" href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.6&SPM=1.55010.103950.6.0.0.0&item_id=570730"></a></p>
            </li>
            <li class="tiny-item" style="display: block; float: left;">
                <a href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.7&SPM=1.55010.103950.7.0.0.0&item_id=608721" class="tiny-pic"><img alt="触摸板无线键盘" width="122" height="100" src="http://img01.taobaocdn.com/tps/i1/T1XuCcXd0XXXXXXXXX-122-100.jpg"></a>

                <p class="des">触摸板无线键盘</p>
                <p class="price">原价:348</p>
                <p class="full"><a class="btn" href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.8&SPM=1.55010.103950.8.0.0.0&item_id=608721"></a></p>
            </li>
            <li class="tiny-item" style="display: block; float: left;">
                <a href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.9&SPM=1.55010.103950.9.0.0.0&item_id=546704" class="tiny-pic"><img alt="奕而乐笔记本冰座" width="122" height="100" src="http://img01.taobaocdn.com/tps/i1/T1RKycXepXXXXXXXXX-122-100.jpg"></a>
                <p class="des">奕而乐笔记本冰座</p>

                <p class="price">原价:59</p>
                <p class="full"><a class="btn" href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.10&SPM=1.55010.103950.10.0.0.0&item_id=546704"></a></p>
            </li>

        </ol>
    </div>
    <ul class="ks-switchable-nav">
        <li class="ks-active">1</li>
    </ul>
    <script>
        KISSY.use("switchable", function(S) {
            //右侧促销区slide切换
            var tiny_slide = new S.Carousel('#J_TinySlide', {
                activeIndex: 0,
                effect: 'scrollx',
                easing: 'easeOutStrong',
                viewSize: [274],
                circular: true,
                prevBtnCls: 'tiny-prev',
                nextBtnCls: 'tiny-next',
                interval: 6,
                lazyDataType: 'img-src' //延迟加载图片？
            });
        });
    </script>
</div>

<a class="s-view-code" href="#">显示源码</a>
</div>
<h3 class="s-title">键盘快捷键</h3>
<div class="s-section">
    <ul class="s-list">
        <li><strong>当焦点在上一页 / 下一页时</strong>
            <ul>
                <li>
                    enter/space 旋转到上一屏下一屏，并且焦点转移到当前屏的第一个面板
                </li>
            </ul>
        </li>

        <li>
            <strong> 当焦点在导航圆点时</strong>
            <ul>
                <li>
                    上/左键：焦点转移到上一个导航圆点
                </li>
                <li>
                    下/右键：焦点转移到下一个导航圆点
                </li>
                <li>
                    enter/space: 旋转到当前导航圆点代表的滚动屏，并且焦点转移到当前屏的第一个面板
                </li>
            </ul>
        </li>


        <li>
            <strong>当焦点在底部滚动屏某个面板时</strong>
            <ul>
                <li>
                    上/左键：焦点转移到上一个面板，必要时滚屏
                </li>
                <li>
                    下/右键：焦点转移到下一个面板，必要时滚屏
                </li>
                <li>
                    enter/space: 触发 itemSelect 事件，item 为当前面板
                </li>
            </ul>
        </li>
    </ul>
</div>

<h3 class="s-title">Note</h3>
<div class="s-section">chrome 不支持 Control + PgUp 以及 Control + PgDn</div>
</div>
</body>
</html>